import React, { useState, useEffect } from "react";
import { Swiper } from "antd-mobile";
import "./Home.less";
import { getNewsLatest } from "../../http/api";
import HomeHead from "../../components/HomeHead";
import NewsItem from "../../components/newsItem";
const Home = function Home() {
  const [time, setTime] = useState("");
  const [swiperData, setSwiperData] = useState([]);
  const [newsListData, setNewsListData] = useState([]);
  // 请求轮播图数据
  useEffect(() => {
    const getSwiper = async () => {
      try {
        const { data } = await getNewsLatest();
        setTime(data.date);
        setSwiperData(data.top_stories);
        setNewsListData(data.stories);
      } catch (_) {}
    };
    getSwiper();
  }, []);
  return (
    <div className="homePage">
      <HomeHead time={time}></HomeHead>
      {/* 轮播图 */}
      <Swiper loop autoplay>
        {swiperData.map((item) => {
          return (
            <Swiper.Item key={item.id}>
              <img src={item.image} alt="" />
              <div>
                <p className="title">{item.title}</p>
                <p className="author">{item.hint}</p>
              </div>
            </Swiper.Item>
          );
        })}
      </Swiper>
      {/* 新闻列表 */}
      {newsListData.map((item) => {
        return <NewsItem key={item.id} item={item} />;
      })}
    </div>
  );
};
export default Home;
